<template>
	<view>
		
		<view class="collect_list">
			<view class="collect_item" v-for="item,id in list" :key="id" @tap="go_detail(item.sn,item.give_status)">
				<image :src="item.image" mode="aspectFill" class="collect_img"></image>
				<view class="collect_info">
					<view class="collect_name">
						<view class="name_text">
							{{item.goods_name}}
						</view>

					</view>
					<view class="num_box" v-if="item.goods_code">
						<view class="num_left">
							<text>编号</text>
						</view>
						<view class="num_right">
							{{item.goods_code}}
						</view>
					</view>
					<!-- 			<view class="author_box">
						<image :src="item.author_avatar" class="author_img" mode="widthFix"></image>
						{{item.author_name}}
					</view> -->
					<view class="buyer" v-if="item.give_status==3">
						购买人： {{item.buy_nickname}}
					</view>
					<view class="price" v-if="item.give_status==2 || item.give_status == 3">
						<text class="pre">￥</text>{{item.give_price}}
					</view>

					<view class="open_btn"
						v-if="item.goods_cat_id == 2 && (item.give_status == 1 || item.give_status == 4)"
						@tap.stop="open(item.sn)">
						开启盲盒
					</view>

				</view>
			</view>

		</view>
		<uni-popup ref="rewards" type="center" :isMaskClick="false">

			<view class="rewards_box">
				<view class="rewards_title">
					恭喜获得新的数字科技商品
				</view>
				<image src="/static/user/rewards_light.png" mode="widthFix" class="rewards_light"></image>
				<image :src="openItem.image" mode="aspectFill" class="reward_img"></image>

				<view class="reward_name">
					{{openItem.goods_name}}
				</view>
			</view>

			<view class="confirm_btn2 " @tap="confirm">
				<text style="position: relative;">
					确定
				</text>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				list: [],
				hasNextPage: true,
				type: 1,
				goods_cat_id: 1,

				openItem: {}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.goods_cat_id = options.goods_cat_id;
			this.type = options.status;
			this.goods_name = options.name;
			if (this.goods_name) {
				uni.setNavigationBarTitle({
					title: this.goods_name
				})
			}
			this.get_data_list()
		},
		onShow() {
			if (this.id) {
				this.get_data_list()
			}
		},

		onReachBottom() {
			if (this.hasNextPage) {
				let new_page = this.page + 1;
				let data = {
					page: new_page,
					limit: this.limit,
					goods_id: this.id,
					status: this.type,
					goods_cat_id: this.goods_cat_id
				}


				this.$api.getMyGoodsListById(data, res => {
					if (res.status) {
						this.list = this.list.concat(res.data);
						this.hasNextPage = res.data.length >= this.limit;
						this.page = new_page
					}
				})

			}
		},
		methods: {
			confirm: function() {
				this.$refs.rewards.close();
				this.get_data_list()
			},

			open: function(sn) {
				uni.showModal({
					content: '确定开启盲盒？',
					success: (r) => {
						if (r.confirm) {
							let data = {
								sn: sn
							}
							this.$api.openBox(data, res => {
								if (res.status) {
									this.openItem = res.data;
									this.$refs.rewards.open()
								} else {
									this.$common.errorToShow(res.msg)
								}
							})
						}
					}
				});
			},
			go_detail: function(id, status) {
				if (status == 3) {
					return;
				}
				uni.navigateTo({
					url: 'collection_details?id=' + id
				})
			},

			get_data_list: function() {
				this.hasNextPage = true;
				this.list = []
				this.page = 1;

				let data = {
					page: this.page,
					limit: this.limit,
					goods_id: this.id,
					status: this.type,
					goods_cat_id: this.goods_cat_id
				}

				this.$api.getMyGoodsListById(data, res => {
					if (res.status) {
						this.list = (res.data);
						this.hasNextPage = res.data.length >= this.limit;
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	.pre {
		font-size: 24rpx;
	}

	.price {
		font-size: 36rpx;
		font-family: DINPro;
		font-weight: bold;
		line-height: 51rpx;
		color: #fff;
		margin-top: 10rpx;
	}

	.buyer {
		color: #B9B9B9;
		margin: 10rpx 0;
		font-size: 24rpx;
	}

	.num_box {
		display: flex;
		align-items: center;
		margin-top: 10rpx;

		.num_left {
			width: 70rpx;
			height: 40rpx;
			font-size: 22rpx;
			font-weight: 500;
			line-height: 1;
			color: #181818;
			border-radius: 5rpx 0px 0px 5rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			z-index: 10;


			background: #F2D7AA;
			opacity: 1;
		}

		.num_right {
			height: 40rpx;
			font-size: 22rpx;
			text-align: center;
			border-radius: 0px 5rpx 5rpx 0px;
			white-space: nowrap;
			opacity: 1;
			padding: 0 10rpx;
			color: #F4E1BC;
			border: 1rpx solid #F4E1BC;
			border-left: none;
		}
	}


	.collect_item {
		width: 335rpx;

		background: #2C2E2E;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-bottom: 30rpx;
		position: relative;


		.collect_num {
			height: 33rpx;
			background: #F4E1BC;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: #2C2E2E;
			padding: 0 17rpx;
			font-weight: normal;
			position: absolute;
			top: 272rpx;
			right: 10rpx;
			z-index: 10;

			.icon_num2 {
				width: 23rpx;
				height: 23rpx;
				margin-right: 6rpx;
			}

		}


		.collect_img {
			width: 100%;
			height: 335rpx;
			border-radius: 20rpx;
			position: relative;


		}

		.collect_info {
			padding: 20rpx;
			width: 100%;

			.open_btn {
				width: 100%;
				height: 55rpx;
				background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);
				box-shadow: 0px 10rpx 40rpx rgba(0, 0, 0, 0.53);
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #181818;
				margin: 20rpx auto;
				margin-bottom: 15rpx;
			}

			.author_box {
				padding-top: 17rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #AFAFAF;

				.author_img {
					width: 33rpx;
					height: 33rpx;
					margin-right: 3rpx;
				}
			}

			.collect_name {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #fff;

				.name_text {
					flex: 1;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;

				}


			}
		}
	}

	.collect_list {
		width: 100%;
		padding: 45rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

	}
</style>
